<template>
  <tm-app>
    <tm-navbar title="我的邀请码" :followTheme="true" :hideHome="true">
    </tm-navbar>
    <tm-sheet
      :padding="[20]"
      :margin="[0]"
      :transprent="true"
      v-for="item in state.list"
      :key="item.id"
    >
      <view
        class="flex flex-row flex-row-center-between round-4 round-br-0"
        style="background-color: #fff"
      >
        <tm-sheet :padding="[20]" :margin="[0]" class="flex-1 round-tl-4">
          <tm-text :fontSize="32" _class="text-weight-b mb-n6"
            >邀请类型：{{ state.type[item.inviteLevel] }}</tm-text
          >
          <tm-sheet
            :fontSize="28"
            :padding="[0]"
            :margin="[0]"
            _class="mt-n4 flex flex-row flex-row-center-start"
          >
            <tm-text>奖励比例</tm-text>
            <tm-text
              :fontSize="28"
              class="mx-n6 text-weight-b"
              :followTheme="true"
              >{{ item.inviteProportion }}</tm-text
            >
            <tm-text>%</tm-text>
          </tm-sheet>
          <!-- <tm-sheet
            :padding="[0]"
            :margin="[0]"
            :fontSize="28"
            _class="mt-n4 flex flex-row flex-row-center-start"
          >
            <tm-text>邀请成功</tm-text>
            <tm-text
              :fontSize="28"
              class="mx-n6 text-weight-b"
              :followTheme="true"
              >{{ item.inviteStatusNumber }}</tm-text
            >
            <tm-text>次</tm-text>
          </tm-sheet> -->
        </tm-sheet>
        <view class="ma-n4 round-tr-4">
          <tm-image
            preview
            :width="200"
            :height="200"
            :src="item.inviteCode"
          ></tm-image>
        </view>
      </view>
      <tm-sheet
        :padding="[0, 0]"
        :margin="[0]"
        color="#fff"
        _class="flex flex-row flex-row-center-center"
        class="round-bl-4 round-br-4"
      >
        <tm-button
          :shadow="0"
          icon="tmicon-eye"
          label="查看"
          :block="true"
          :height="65"
          _class="mr-n10 "
          class="flex-1"
          @click="navigatTo(item.id)"
        >
        </tm-button>
        <tm-button
          :margin="[10]"
          color="red"
          class="flex-1"
          :block="true"
          :height="65"
          :followTheme="false"
          icon="tmicon-delete-fill"
          :shadow="0"
          label="删除"
          @click="delInviteCode(item.id)"
        >
        </tm-button>
      </tm-sheet>
    </tm-sheet>
    <tm-message ref="msg"></tm-message>
  </tm-app>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getInviteCodeListApi, delInviteCodeApi } from "@/api";
const msg = ref(null);

const state = reactive({
  list: [],
  // (城市合伙人 HHR 、团长 TZ 、拓展员 TZY、商家 SJ、普通用户 YH)
  type: {
    HHR: "城市合伙人",
    TZ: "团长",
    TZY: "拓展员",
    SJ: "商家",
    YH: "普通用户",
  },
});

onMounted(async () => {
  const res = await getInviteCodeListApi();
  state.list = res;
});

const navigatTo = (id) => {
  uni.navigateTo({
    url: "/myPages/shareInviteCode?id=" + id,
  });
};

const delInviteCode = async (id) => {
  await delInviteCodeApi({ id });
  state.list = state.list.filter((item) => item.id !== id);
  msg.value.show({ model: "success", text: "删除成功" });
};
</script>

<style scoped></style>
